<template>
  <el-dialog
    v-model="visible"
    title="批量创建告警"
    width="800px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="batch-create-alert-content">
      <el-alert
        type="info"
        :closable="false"
        style="margin-bottom: 20px"
      >
        <template #default>
          <div>
            <p>已选择 <strong>{{ selectedIds.length }}</strong> 个资产</p>
            <p style="margin-top: 5px; font-size: 12px; color: #909399">
              单次最多支持100个资产，超出部分将被忽略
            </p>
          </div>
        </template>
      </el-alert>

      <!-- 创建结果 -->
      <div v-if="createResult" class="result-section">
        <el-divider>创建结果</el-divider>
        <div class="result-summary">
          <el-statistic title="总计" :value="createResult.total" />
          <el-statistic
            title="成功"
            :value="createResult.success_count"
            class="success-stat"
          />
          <el-statistic
            title="失败"
            :value="createResult.fail_count"
            class="fail-stat"
          />
        </div>

        <!-- 详细结果列表 -->
        <div class="result-list" v-if="createResult.results && createResult.results.length > 0">
          <el-table
            :data="createResult.results"
            border
            size="small"
            max-height="300"
            style="margin-top: 15px"
          >
            <el-table-column prop="suspected_asset_id" label="资产ID" width="100" align="center" />
            <el-table-column label="状态" width="80" align="center">
              <template #default="{ row }">
                <el-tag v-if="row.success" type="success" size="small">成功</el-tag>
                <el-tag v-else type="danger" size="small">失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="alert_id" label="告警ID" width="120" align="center">
              <template #default="{ row }">
                <span v-if="row.alert_id">{{ row.alert_id }}</span>
                <span v-else class="no-data">-</span>
              </template>
            </el-table-column>
            <el-table-column prop="error" label="错误信息" min-width="200" show-overflow-tooltip>
              <template #default="{ row }">
                <span v-if="row.error" style="color: #f56c6c">{{ row.error }}</span>
                <span v-else class="no-data">-</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 加载中 -->
      <div v-if="creating" class="loading-section">
        <el-skeleton :rows="5" animated />
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button
          type="primary"
          :loading="creating"
          :disabled="selectedIds.length === 0 || !!createResult"
          @click="handleCreate"
        >
          {{ createResult ? "重新创建" : "确认创建" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { ElMessage } from "element-plus";
import { batchCreateAlerts } from "../../../servers";

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  selectedIds: { type: Array<number>, default: () => [] },
});

const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
  (e: "refresh"): void;
}>();

const visible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit("update:modelValue", value),
});

const creating = ref(false);
const createResult = ref<any>(null);

// 创建告警
const handleCreate = async () => {
  if (props.selectedIds.length === 0) {
    ElMessage.warning("请先选择要创建告警的资产");
    return;
  }

  if (props.selectedIds.length > 100) {
    ElMessage.warning("单次最多支持100个资产，已自动截取前100个");
  }

  creating.value = true;
  createResult.value = null;

  try {
    // 限制最多100个
    const idsToCreate = props.selectedIds.slice(0, 100);
    const { data, message } = await batchCreateAlerts({
      suspected_asset_ids: idsToCreate,
    });

    if (data) {
      createResult.value = data;
      ElMessage.success(message || "批量创建告警完成");
      
      // 如果全部成功，触发刷新
      if (data.fail_count === 0) {
        emit("refresh");
      }
    }
  } catch (error: any) {
    ElMessage.error(error?.message || "批量创建告警失败");
  } finally {
    creating.value = false;
  }
};

// 关闭弹窗
const handleClose = () => {
  createResult.value = null;
  visible.value = false;
};
</script>

<style scoped lang="scss">
.batch-create-alert-content {
  .result-section {
    margin-top: 20px;
  }

  .result-summary {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin: 20px 0;

    .success-stat {
      :deep(.el-statistic__number) {
        color: #67c23a;
      }
    }

    .fail-stat {
      :deep(.el-statistic__number) {
        color: #f56c6c;
      }
    }
  }

  .result-list {
    margin-top: 15px;
  }

  .loading-section {
    margin-top: 20px;
  }

  .no-data {
    color: #909399;
    font-size: 12px;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>

